<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="message"/>
<button type="button" onclick="sendMsg()">发送</button>
<button type="button" onclick="openWs()">连接</button>
<div id="msg"></div>
</body>

<script src="/jquery/jquery-3.3.1.js"></script>
<script data-th-inline="javascript">
    /*<![CDATA[*/
    var ws = null;
    var from = [[${from}]];
    var to = [[${to}]];

    function sendMsg() {
        var message = $("#message").val();
        var content = {};
        content.message = message;
        content.to = to;
        content.from = from;

        ws.send(JSON.stringify(content));
    }

    function openWs() {
debugger;
        ws = new WebSocket("ws://localhost:9090/ws/" + from);

        // 接收消息
        ws.onmessage = function(evt) {
            $("#msg").append(evt.data + '<br/>');
        };

        ws.onopen = function() {
            // $("#msg").append("websocket 连接成功</br>");
            // sendMsg();
        };

        // ws.addEventListener('open', function (event) {
        //     sendMsg();
        // });

        ws.onclose = function() {
            debugger;
            $("#msg").append("websocket 已关闭");
        };

        ws.onerror = function(event) {
            debugger;
            $("#msg").append(event);
        }
    }

    /*]]>*/
</script>
</html>